<template>
    <div>
        <div>
            <div style="height: 50px;background-color: blue;display: flex">
                <div style="display: flex;justify-content: center;position: absolute;top: 13px">
                    <i class="el-icon-arrow-left" style="color: white;z-index: 10000" @click="toding"></i>
                </div>
                <div style="display: flex;align-items: center;width: 100%;justify-content: center">
                    <span style="color: white;font-size: 14px">在线支付</span>
                </div>
            </div>
            <div style="margin-left: 10px;margin-top: 10px">
                <p style="color: gray;font-size: 15px;">订单信息</p>
            </div>
            <div class="business-name">
                <p style="margin-left: 10px;font-weight: bold">不好吃面团(大连店)</p>
                <span style="color:red;margin-left: 175px">￥30</span>
            </div>
            <div class="order-pay">
                <div style="display: flex;margin-left: 10px;margin-top: 10px;margin-bottom: 20px">
                    <div class="img-four">
                        <img src="../assets/04.png" alt="">
                    </div>
                    <div style="display: flex;align-items: center;margin-left: 10px">
                        <p>肉面团(好吃)</p>
                        <p style="margin-left: 10px">x2</p>
                        <p style="margin-left: 160px">￥20</p>
                    </div>
                </div>
                <div style="display: flex;margin-left: 10px;margin-top: 10px;margin-bottom: 20px">
                    <div class="img-four">
                        <img src="../assets/05.png" alt="">
                    </div>
                    <div style="display: flex;align-items: center;margin-left: 10px">
                        <p>速面团(好吃)</p>
                        <p style="margin-left: 10px">x1</p>
                        <p style="margin-left: 160px">￥10</p>
                    </div>
                </div>
                <div style="display: flex;justify-content: space-between; margin-left: 10px;margin-top: 10px;margin-bottom: 40px">
                    <p>配送费</p>
                    <p style="margin-right: 27px">￥3</p>
                </div>
        </div>
            <div class="pay-use">
                <div style="flex: 1;display: flex;height: 100%">
                    <div class="img-zhi" style="display: flex;flex: 1;justify-content: center;align-items: center">
                        <img src="../assets/zhi.png" alt="">
                    </div>
                    <div style="flex: 3;display: flex;align-items: center">
                        <p style="font-size: 16px;color: gray">支付宝</p>
                    </div>
                    <div style="flex: 1;display: flex;align-items: center;">
                       <i class="el-icon-success" style="color: #42b983;font-size: 18px;margin-left: 30px"></i>
                    </div>
                </div>
                <div style="flex: 1;display: flex;margin-top: 15px">
                    <div class="img-zhi" style="display: flex;flex: 1;justify-content: center;align-items: center">
                        <img src="../assets/wei.png" alt="">
                    </div>
                    <div style="flex: 3;display: flex;align-items: center">
                        <p style="font-size: 16px;color: gray">微信支付</p>
                    </div>
                    <div style="flex: 1;display: flex;align-items: center">
<!--                        <i class="el-icon-success" style="color: #42b983;font-size: 18px"></i>-->
                    </div>
                </div>
            </div>
            <div style="width: 375px;height: 35px;display: flex;align-items: center;justify-content: center;margin-top: 25px">
                <div class="in-pay">
                    <div>
                        确认支付
                    </div>
                </div>
            </div>
        </div>
    </div>
</template>

<script>
    export default {
        name: "onlinePay",
        methods:{
            toding(){
                this.$router.push('/pay')
            }
        }
    }
</script>

<style scoped>
    .business-name{
        height: 40px;
        width: 375px;
        display: flex;
        align-items: center;
        font-size: 15px;
        border-bottom: 1px solid #e2d6d6;
    }
    .order-pay{
        height: auto;
        width: 375px;
        display: flex;
        flex-flow: column;
        font-size: 12px;
        color: gray;
    }
    .img-four img{
        width: 50px;
        height: 50px;
    }
    .footer-pay{
        height: 50px;
        width: 375px;
        background-color: gray;
        position: fixed;
        bottom: 0;
        display: flex;
        color: white;
        font-size: 16px;
        font-weight: bold;
    }
    .pay-use{
        width: 375px;
        height: 80px;
        display: flex;
        flex-flow: column;
        justify-content: space-around;
    }
    .in-pay{
        width: 300px;
        height: 40px;
        background-color: #42b983;
        border-radius: 5px;
        display: flex;
        justify-content: center;
        align-items: center;
        color: white;
        font-weight: bold;
        font-size: 18px;
    }
</style>
